<template>
	<view class="select-interest">
		<!-- 蒙层 -->
		<view
			class="mask"
			@click.self="$emit('close')"
			@touchmove.stop
		/>
		<!-- 主体内容 -->
		<view class="content">
			<!-- 标题 -->
			<view class="h3">根据需求为你定制推荐内容</view>
			<view
				class="arrow-right"
				@click="$emit('close')"
			>
				<u-icon
					name="arrow-right"
					custom-prefix="icon"
					size="70"
					color="#6782f1"
				/>
				<text class="text small">跳过</text>
			</view>
			<!-- 标签选择 -->
			<view class="select">
				<view class="title strong">个人({{ specialtyAmount }} / 4)</view>
				<view class="select-box">
					<view
						class="item"
						v-for="(tag, index) in arr_specialtyTags"
						:key="index"
						@click="onclickTag('specialtyAmount', tag)"
					>
						<text>{{ tag.text }}</text>
						<view class="circle-out">
							<view
								class="in"
								:style="{
									'background-color': tag.select ? '#6782f1' : '#c9c8ca'
								}"
							/>
						</view>
					</view>
					<view
						v-if="specialtyAmount < 4"
						class="item"
					>
						<input
							type="text"
							placeholder="自定义标签"
							maxlength="6"
							@blur="onblurAddTag('arr_specialtyTags')"
							v-model="selfTag"
						>
					</view>
				</view>
				<view class="title strong">竞赛({{ compAmount }} / 4)</view>
				<view class="select-box">
					<view
						class="item compete"
						v-for="(tag, index) in arr_compTags"
						:key="index"
						@click="onclickTag('compAmount', tag)"
					>
						<view class="tag-text">{{ tag.text }}</view>
						<view class="circle-out">
							<view
								class="in"
								:style="{
									'background-color': tag.select ? '#6782f1' : '#c9c8ca'
								}"
							/>
						</view>
					</view>
					<view
						v-if="compAmount < 4"
						class="item compete"
					>
						<input
							class="input-interest"
							type="text"
							placeholder="自定义标签"
							maxlength="6"
							@blur="onblurAddTag('arr_compTags')"
							v-model="selfTag"
						>
					</view>
				</view>
			</view>
			<!-- 底部按键 -->
			<btn-bottom
				text="确认"
				@click="onclickSure"
			/>
		</view>
	</view>
</template>

<script>
import { putMe } from '@/api/user.js'
import { getUserInfo, setUserInfo } from '@/utils/user'

export default {
  data() {
    return {
      selfTag: '',
      arr_specialtyTags: [
        { text: '视觉', select: false },
        { text: '文书', select: false },
        { text: '前端', select: false },
        { text: '后端', select: false },
        { text: '小程序', select: false },
        { text: '大数据', select: false },
        { text: '商业模式', select: false }
      ],
      arr_compTags: [
        { text: '互联网+', select: false },
        { text: '挑战杯', select: false },
        { text: '服务外包', select: false },
        { text: '电子商务', select: false },
        { text: '数学建模', select: false },
        { text: 'ACM', select: false },
        { text: '机械设计', select: false }
      ]
    }
  },
  computed: {
    /* 计算选中的长度 */
    specialtyAmount() {
      return this.arr_specialtyTags.filter(item => item.select).length
    },
    compAmount() {
      return this.arr_compTags.filter(item => item.select).length
    }
  },
  created() {
    /* 获取已经选择的标签，将其设置为true */
    let arr_specialtyTags = getUserInfo().userInfo.specialtyTags

    arr_specialtyTags = arr_specialtyTags ? arr_specialtyTags.split(',') : []
    /* 判断是否在已存标签 */
    arr_specialtyTags.forEach(tag => {
      /* 判断该标签是否在预设中，若在直接修改select，不在则末尾追加 */
      const index = this.arr_specialtyTags.findIndex(item => item.text === tag)

      if (index >= 0) {
        this.arr_specialtyTags[ index ].select = true
      } else {
        this.arr_specialtyTags.push({
          text: tag,
          select: true
        })
      }
    })
    let arr_compTags = getUserInfo().userInfo.compTags

    arr_compTags = arr_compTags ? arr_compTags.split(',') : []
    arr_compTags.forEach(tag => {
      /* 判断该标签是否在预设中，若在直接修改select，不在则末尾追加 */
      const index = this.arr_compTags.findIndex(item => item.text === tag)

      if (index >= 0) {
        this.arr_compTags[ index ].select = true
      } else {
        this.arr_compTags.push({
          text: tag,
          select: true
        })
      }
    })
  },
  methods: {
    /**
		 * @param {String} key 对应的对象名
		 */
    onblurAddTag(key) {
      if (this.selfTag) {
        this[ key ].push({
          text: this.selfTag,
          select: true
        })
        this.selfTag = ''
      }
    },
    /**
		 * 点击标签，切换选中状态
		 * @param {String} key 对应的对象名
		 * @param {Object} tag 标签对象
		 */
    onclickTag(key, tag) {
      if (tag.select) { // 如果未选中直接变true
        tag.select = false
      } else if (this[ key ] < 4) { // 未选中,且小于4个,则可以选择
        tag.select = true
      }
    },
    /**
		 * 点击确认,更新全局用户属性，并调用api更新数据库
		 */
    onclickSure() {
      const specialtyTags = this.arr_specialtyTags
        .filter(item => item.select)
        .map(item => item.text)
        .join(',')
      const compTags = this.arr_compTags
        .filter(item => item.select)
        .map(item => item.text)
        .join(',')

      /* 更新 */
      putMe({
        specialtyTags,
        compTags
      })
      setUserInfo({
        userInfo: {
          ...getUserInfo().userInfo,
          specialtyTags,
          compTags
        }
      })
      this.$emit('finish', getUserInfo())
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.select-interest {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  animation: show 0.6s ease;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .content {
    position: relative;
    width: 100%;
    height: 90vh;
    margin-top: 10vh;
    background-color: #ffffff;
    border-top-left-radius: $radiusLarge;
    border-top-right-radius: $radiusLarge;

    .h3 {
      padding: 20px 20px 40px 20px;
      color: $primary1;
    }

    .arrow-right {
      position: absolute;
      top: 15px;
      right: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
    }

    .select {
      width: 100%;
      height: 100%;
      overflow-y: scroll;

      /* 个人/竞赛 title */
      .title {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
        color: $primary2;

        &::before {
          width: 22%;
          height: 2px;
          margin-right: 5%;
          content: '';
          background-color: $primary2;
          border-radius: 10px;
        }

        &::after {
          width: 22%;
          height: 2px;
          margin-left: 5%;
          content: '';
          background-color: $primary2;
          border-radius: 10px;
        }
      }

      /* 选择的盒子 */
      .select-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
        padding: 0 20px;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 170px;
        }

        .item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: calc(100% - 25px);
          height: 45px;
          padding: 0 10px 0 15px;
          color: #ffffff;
          background-color: $primary2;
          border-radius: $radiusLarge;
          box-shadow: $shadow2;

          .input-interest {
            font-weight: 700;
          }

          /* 比赛的选框 */
          &.compete {
            align-items: flex-start;
            height: 70px;
            padding: 10px 10px 10px 15px;

            /* 文字 */
            .tag-text {
              display: flex;
              align-items: flex-end;
              height: 100%;
            }
          }
        }

        /* 外圆 */
        .circle-out {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color: $primary4;
          border-radius: 50%;
        }

        /* 内圆 */
        .in {
          width: 22px;
          height: 22px;
          border: $border1;
          border-radius: 50%;
        }
      }
    }
  }
}

@keyframes show {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
